<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Beehive</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/jquery-3.4.0.js}"></script>

    <style>
        <!--
        CSS方式禁止文字复制，只兼容webkit内核-- >
        * {
            -webkit-user-select: none;
        }

        .row:hover {
            background-color: #eaeaea;
        }
    </style>
</head>
<body>

<div class="container table table-hover" style="margin-top: 16px;">
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">ID</span>
        <span id="id" style="width: 70%"></span>
    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">用户名</span>
        <span id="username" style="width: 70%"></span>

    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">密码</span>
        <span id="password" style="width: 70%"></span>
    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">姓名</span>
        <span id="realName" style="width: 70%"></span>
    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">性别</span>
        <span style="width: 70%"><img id="gender" th:src="@{/img/male.png}"/></span>
    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">手机号码</span>
        <span id="phoneNum" style="width: 70%"></span>
    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">电子邮箱</span>
        <span id="email" style="width: 70%"></span>
    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">注册时间</span>
        <span id="registerTime" style="width: 70%"></span>
    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">最后一次登录</span>
        <span id="updateTime" style="width: 70%"></span>
    </div>
    <div class="row pt-2 pb-2">
        <span style="width: 30%; text-align: center">账号状态</span>
        <span style="width: 70%"><img id="valid" th:src="@{/img/ok.png}"/></span>
    </div>
</div>
</div>
<script>

    // 禁止右键菜单
    document.oncontextmenu = function () {
        return false;
    };
    // 禁止文字选择
    document.onselectstart = function () {
        return false;
    };
    // 禁止复制
    document.oncopy = function () {
        return false;
    };
    // 禁止剪切
    document.oncut = function () {
        return false;
    };
    // 禁止粘贴
    document.onpaste = function () {
        return false;
    };

    // 对象容器
    let user = {};

    // 初始化数据
    $(function () {
        let str = unescape(window.location.search.substring(1).split("=")[1]);
        console.log("字符串：" + str);
        user = JSON.parse(str);
        // jq 赋值
        $("#id").append(user.id);
        $("#username").append(user.username);
        $("#realName").append(user.realName);
        $("#password").append(user.password);
        // $.attr() 为jQuery函数，设置标签属性和值
        if (user.gender == 0) {
            $("#gender").attr("src", "/img/female.png");
        } else {
            $("#gender").attr("src", "/img/male.png");
        }
        $("#phoneNum").append(user.phoneNum);
        $("#email").append(user.email);
        // ESC6取消了new Date().format()函数，替代函数：toXxxString()
        $("#registerTime").append(new Date(user.registerTime).toLocaleString().split("/").join("-"));
        $("#updateTime").append(new Date(user.updateTime).toLocaleString().split("/").join("-"));
        if (user.valid == 0) {
            $("#valid").attr("src", "/img/no.png");
        } else {
            $("#valid").attr("src", "/img/ok.png");
        }
    });
</script>

</body>
</html>